import React,{ useState } from 'react'
import { Select, Space,Checkbox,Input,Button,Table,Modal,Switch  } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import './EmptyKj.css'

export default function EmptyKj() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const handleChange = (value) => {
        console.log(`selected ${value}`);
      };
  return (
    <>
         <div className='empty'>
        <img src={require("../../../static/images/wt.png")} alt="" />
        <p>项目下未创建空间～</p>
      </div>
      <Modal title="新建空间" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText={'取消'} okText={'保存'}>
        <div className="addNew">
            <p><span>* </span> 空间名称</p>
            <Input className='name' placeholder="请输入" />
            <div className='floor'>
              <div>
                <p><span>* </span> 所属楼宇</p>
                <Select 
                 defaultValue="lucy"
                 style={{
                   width: 206,
                 }}
                 allowClear
                 options={[
                   {
                     value: 'lucy',
                     label: 'Lucy',
                   },
                 ]}
                 />
              </div>
              <div>
                <p><span>*</span>所属楼层</p>
                <Select 
                 defaultValue="lucy"
                 style={{
                   width: 206,
                   background:'#F8FBFF',
                   borderRadius:'2px'
                 }}
                 allowClear
                 options={[
                   {
                     value: 'lucy',
                     label: 'Lucy',
                   },
                 ]}
                 />
              </div>
            </div>
            <div className='bot'>
              <p><span>* </span> 面积 m²</p>
              <Input className='name' placeholder=" 面积（㎡）" />
              <div className='floor'>
                 <div>
                  <p>装修</p>
                  <Select 
                   defaultValue="lucy"
                   style={{
                     width: 206,
                     background:'#F8FBFF',
                     borderRadius:'2px'
                   }}
                   allowClear
                   options={[
                     {
                       value: 'lucy',
                       label: 'Lucy',
                     },
                   ]}
                   />
                 </div>
                 <div>
                  <p>朝向</p>
                  <Select 
                   defaultValue="lucy"
                   style={{
                     width: 206,
                     background:'#F8FBFF',
                     borderRadius:'2px'
                   }}
                   allowClear
                   options={[
                     {
                       value: 'lucy',
                       label: 'Lucy',
                     },
                   ]}
                   />
                 </div>
              </div>
              <p>空间备注</p>
              <textarea className='text'></textarea>
            </div>
        </div>
      </Modal>
    </>
  )
}
